<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数组件使用prop</title>
</head>
<body>
    <!-- 引入React核心库 -->
    <script src="../JS/react.development.js"></script>
    <!-- 引入ReactDOM，用于支持react操作DOM -->
    <script src="../JS/react-dom.development.js"></script>
    <!-- 引入babel 用于将书写的JSX语法 编译成JS语法 -->
    <script src="../JS/babel.min.js"></script>
    <!-- 老版本的 传递限制 依赖库 15版本 16版本 以后 废弃 -->
    <script src="../JS/prop-types.js"></script>


    <div id="test1"></div>
    <div id="test2"></div>
    <div id="test3"></div>


    <script type="text/babel">
        // class Person extends React.Component{
        //     // 限制  此处 写法 可 见 复习中的 类的基本知识 static 给类本身添加属性 而不是 给 类的实例对象 添加属性
        //     static propTypes = {
        //         name:PropTypes.string.isRequired,
        //         age:PropTypes.number,       
        //         sex:PropTypes.string,
        //     }
        //     static defaultProps = {
        //         sex:'女',
        //         age:14
        //     }


        //     constructor(props){
        //         // 构造器 是否 接受 props,是否传给 super(), 取决于:是否希望在构造器 中 通过this访问props
        //         // 视频 注解 构造器 能省略 就 省略  开发中 几乎不写
        //         super(props)
        //         console.log(this.props) //这个地方 可以通过打印 this.props 和 props 来 查看区别
        //     }

        //     render(){
        //         const {name,age,sex} = this.props
        //         // props 是 只读 的
        //         // this.props.name = 'Jack'        //此行代码会报错,应为Props是 只读的
        //         return(
        //             <ul>
        //                 <li>姓名:{name}</li>
        //                 <li>性别:{sex}</li>
        //                 <li>年龄:{age}</li>
        //             </ul>
        //         )
        //     }
        // } 

        
        function Person(props){
            const{name,age,sex} = props
            return(
                <ul>
                    <li>姓名:{name}</li>
                    <li>性别:{sex}</li>
                    <li>年龄:{age}</li>
                </ul>
            )
        }
        Person.propTypes = {
            name:PropTypes.string.isRequired,
            age:PropTypes.number,       
            sex:PropTypes.string,
        }
        Person.defaultProps = {
            sex:'女',
            age:14
        }
        const p = {name:'Altria',age:14,sex:'女'}
        ReactDOM.render(<Person {...p} />,document.getElementById('test1'))
       

        /* 
            总结陈词
                组件实例的三大属性 state prop refs
                    类式组件 三个 都可以使用
                    函数式组件 只可以玩 prop  高版本 可以玩 state 通过hooks
        */


    </script>


</body>
</html>